<template>
    <div>
        <wz-table :columns="wzApplicationColumn" :use-index="true" :table-data="fileData">
            <template #osRealAmount="{ row }">
                <div v-if="+row.osRealAmount" class="click-row" @click="handleMaterialsDetail(row)">
                    {{ row.osRealAmount }}
                </div>
                <div v-else>{{ row.osRealAmount }}</div>
            </template>
            <template #retreatAmount="{ row }">
                <div v-if="+row.retreatAmount" class="click-row" @click="handleMaterialBackVisible(row)">
                    {{ row.retreatAmount }}
                </div>
                <div v-else>{{ row.retreatAmount }}</div>
            </template>
            <!-- 已贴签数量 -->
            <template #labelNum="{ row }">
                <div v-if="+row.labelNum" class="click-row" @click="handleClick(row, 'labelNum')">
                    {{ row.labelNum }}
                </div>
                <div v-else>{{ row.labelNum }}</div>
            </template>
            <!-- 未贴签数量 -->
            <template #noLabelNum="{ row }">
                <div v-if="+row.noLabelNum" class="click-row" @click="handleClick(row, 'noLabelNum')">
                    {{ row.noLabelNum }}
                </div>
                <div v-else>{{ row.noLabelNum }}</div>
            </template>
            <!-- 已到货确认数量 -->
            <template #confirmNum="{ row }">
                <div v-if="+row.confirmNum" class="click-row" @click="handleClick(row, 'confirmNum')">
                    {{ row.confirmNum }}
                </div>
                <div v-else>{{ row.confirmNum }}</div>
            </template>
            <!-- 未到货确认数量 -->
            <template #noConfirmNum="{ row }">
                <div v-if="+row.noConfirmNum" class="click-row" @click="handleClick(row, 'noConfirmNum')">
                    {{ row.noConfirmNum }}
                </div>
                <div v-else>{{ row.noConfirmNum }}</div>
            </template>
        </wz-table>
        <pagination :total="total" :page="page" @pagination="pagination" />
        <!--出库数量支持点击 点击后弹出页面  -->
        <materialOutDialog v-if="materialRemovalVisible" ref="materialRemovalVisible"
            :material-removal-visible.sync="materialRemovalVisible" :current-row="currentRow" />
        <!-- 点击申请退库总数 -->
        <returnDetailDialog v-if="returnDetailDialogVisible" ref="returnDetailDialogVisible"
            :material-removal-visible.sync="returnDetailDialogVisible" :current-row="currentRow" />
        <!-- 到货确认数量 -->
        <yardViewDialog ref="materialConfirmVisible" :material-removal-visible.sync="materialConfirmVisible"
            :file-data="fileList" />
    </div>
</template>
<script>
const MATERIAL_APPLICATION_INFO = [
    {
        label: '物料编码',
        prop: 'categoryCode',
        elProps: {
            width: '140px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '物料名称',
        prop: 'categoryName',
        elProps: {
            width: '140px',
            'show-overflow-tooltip': true
        }
    },
    { label: '计量单位', prop: 'unit' },
    { label: '主设备标识', prop: 'spuMainName' },
    { label: '设计数量', prop: 'amount' },
    { label: '出库数量', prop: 'osRealAmount' },
    { label: '退库数量', prop: 'retreatAmount' },
    { label: '已贴签数量', prop: 'labelNum' },
    { label: '未贴签数量', prop: 'noLabelNum' },
    { label: '已到货确认数量', prop: 'confirmNum' },
    { label: '未到货确认数量', prop: 'noConfirmNum' }
]
const Material_Collection_Details = [
    {
        label: '出库订单号',
        prop: 'orderId',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '出库明细行号',
        prop: 'osDetailId',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '物料编码',
        prop: 'categoryCode',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '物料名称',
        prop: 'categoryName',
        elProps: {
            'show-overflow-tooltip': true
        }
    },
    {
        label: '出库数量',
        prop: 'osAmount',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '计量单位',
        prop: 'unit',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '是否利旧资产',
        prop: 'outputType',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '不含税单价',
        prop: 'price',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '含税总金额',
        prop: 'totalTaxAmount',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '领用人',
        prop: 'createBy',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '出库时间',
        prop: 'osTime',
        elProps: {
            width: '140px',
            'show-overflow-tooltip': true
        }
    }
]
const RESOURCE_ASSET_CODING = [
    { label: '资源资产编码', prop: 'sourceAssetCode' },
    { label: '标签ID', prop: 'labelId' },
    { label: '赋码贴签方式', prop: 'fromPhotoName' },
    { label: '赋码贴签人', prop: 'labelUser' },
    { label: '是否到货确认', prop: 'scanConfirm' },
    { label: '到货确认人', prop: 'scanConfirmUser' },
    { label: '经纬度', prop: 'longitude' }
]
// 系统常量配置
import wzTable from './cTable'
import materialOutDialog from '../dialogComponents/materialOutDialog.vue'
import returnDetailDialog from '../dialogComponents/returnDetailDialog.vue'
import yardViewDialog from '../dialogComponents/yardViewDialog.vue'
import {
    noSwapLableDetailList,
    yesSwapLableDetailList
} from '@/api/material'
import { enableScroll, disableScroll } from '@/utils'
import pagination from '@/components/current/Pagination'
export default {
    name: 'MaterialDetail',
    components: {
        wzTable,
        materialOutDialog,
        returnDetailDialog,
        yardViewDialog,
        pagination
    },
    data() {
        return {
            // 分页信息
            fileList: [],
            fileData: [],
            materialRemovalVisible: false,
            returnDetailDialogVisible: false,
            materialConfirmVisible: false,
            arrivalVisible: false,
            mcDetails: [],
            wzApplicationColumn: [],
            mrList: [],
            currentRow: [],
            total: 0,
            page: 1
        }
    },
    computed: {
        query() {
            return this.$route.query
        },
        elDialogShow() {
            const { materialRemovalVisible, returnDetailDialogVisible, materialConfirmVisible } = this
            return [{ key: 'materialRemovalVisible', value: materialRemovalVisible }, { key: 'returnDetailDialogVisible', value: returnDetailDialogVisible }, { key: 'materialConfirmVisible', value: materialConfirmVisible }]
        }
    },
    watch: {
        elDialogShow(value) {
            if (self !== top) {
                const contentBody = window.top.document.body
                const ref = value.filter(item => { return item.value })
                if (ref.length) {
                    this.dialogEl(ref[0].key)
                } else {
                    this.$nextTick(() => {
                        enableScroll(contentBody)
                    })
                }
            }
        }
    },
    created() {
        this.wzApplicationColumn = JSON.parse(
            JSON.stringify(MATERIAL_APPLICATION_INFO)
        )
        this.mcDetails = JSON.parse(
            JSON.stringify(Material_Collection_Details)
        )
        this.resourceCoding = JSON.parse(JSON.stringify(RESOURCE_ASSET_CODING))
    },
    methods: {
        pagination(params) {
            this.$emit('pagination', params)
        },
        // 点击出库数量
        handleMaterialsDetail(row) {
            this.currentRow = row
            console.log(row)
            this.materialRemovalVisible = true
        },
        // 退库数量
        handleMaterialBackVisible(row) {
            this.currentRow = row
            this.returnDetailDialogVisible = true
        },
        // 已贴标签数量 信息化代码逻辑
        // async handleClick(row, type) {
        //     this.materialConfirmVisible = true
        //     const keyValue = {
        //         主材: '0',
        //         主设备: '0',
        //         辅材: '1'
        //     }
        //     const params = {
        //         prjId: this.query.prjId,
        //         categoryCode: row.categoryCode,
        //         catType: keyValue[row.spuMainName]
        //             ? keyValue[row.spuMainName]
        //             : ''
        //     }
        //     const res = await queryLableCodeDetailList(params)
        //     if (+res.code === 200) {
        //         this.fileList = res.data
        //     }
        // },
        // 2.0新逻辑
        async handleClick(row, type) {
            this.fileList = []
            // 新枚举
            const enumObj = {
                labelNum: 0,
                confirmNum: 1,
                noConfirmNum: 2
            }
            // 新需求接口 未标签数量特殊接口
            const params2 = {
                prjId: this.query.prjId,
                categoryCode: row.categoryCode,
                noLableAmount: row[type]
            }
            // 换签新接口
            // 新需求接口 未标签数量特殊接口
            const params3 = {
                prjIds: this.query.prjId,
                categoryCode: row.categoryCode,
                type: enumObj[type]
            }
            // 未贴签新接口 
            if (type === 'noLabelNum') {
                this.materialConfirmVisible = true
                const res = await noSwapLableDetailList(params2)
                if (+res.code === 200) {
                    this.fileList = res.data
                }
            } else {
                this.materialConfirmVisible = true
                const res = await yesSwapLableDetailList(params3)
                if (+res.code === 200) {
                    this.fileList = res.data
                }
            }
        },
        dialogEl(refName) {
            // 将弹框挂载在最外层
            const contentBody = window.top.document.body
            this.$nextTick(() => {
                const dialogModal = document.querySelector('.v-modal')
                contentBody.appendChild(this.$refs[refName].$el)
                if (dialogModal) {
                    contentBody.appendChild(dialogModal)
                }
                disableScroll(contentBody)
            })
        }
        // 未贴标签数量
        // 已到货确认数量
        // 未到货确认数量
    }
}
</script>
<style scoped lang="scss">
.el-upload--text {
    width: 100%;
}

.btnflex {
    display: flex;
    justify-content: space-between;
}

.el-table th {
    padding: 0px 0;
    text-align: center;
    font-size: 12px;
    color: #333333;
    letter-spacing: 0;
}

.el-table td {
    padding: 0px 0;
    text-align: center;
    font-size: 2px;
    color: #333333;
    letter-spacing: 0;
}

.click-row {
    color: #53c7f8;
    cursor: pointer;
}

.mt-10 {
    margin-top: 10px;
}
</style>
